<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../js/vue.js"></script>
		<title>样式绑定</title>
		<style>
			.basic {
				width: 400px;
				height: 100px;
				border: 1px solid springgreen;
			}

			.happy {
				background-color: coral;
			}

			.sad {
				background-color: green;
			}

			.normal {
				background-color: skyblue;
			}

			.atguigu1 {
				background-color: rgba(255, 255, 0, 0.664);
				background: linear-gradient(30deg, yellow, pink, orange, yellow);
			}

			.atguigu2 {
				font-size: 30px;
			}

			.atguigu3 {
				border-radius: 20px;
			}
		</style>
	</head>
	<body>
		<!-- 
        绑定样式:
            1. class样式
                写法:class="xxx" xxx可以是字符串、对象、数组。
                    字符串写法适用于:类名不确定,要动态获取。
                    对象写法适用于:要绑定多个样式,个数不确定，名字也不确定。
                    数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
            2. style样式
                :style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。 
      -->
		<div id="root">
			//第一种情况
			<!-- 绑定class样式，字符串写法，适用于:样式的类名不确定,需要动态指定 -->
			<!-- <div id="demo" v-bind:class="attribute" class="basic" @click="changeMood">{{name}}</div> -->
			<div id="demo" :class="attribute" class="basic" @click="changeMood">{{name}}</div>

			//第二种情况
			<!-- 绑定class样式，数组写法，适用于:样式的个数不确定,名字也不确定 -->
			<div class="basic" v-bind:class="classArr">{{name}}</div><br /><br />


			<!-- 第三种情况 -->
			<!-- 绑定class样式，对象写法，适用于:样式的个数确定,名字也确定，但要动态决定用不用 -->
			<div class="basic" v-bind:class="classObj">{{name}}</div><br /><br />

			<!-- 第四种情况 用的不多-->
			<div class="basic" v-bind:style="styleObj">{{name}}</div>

		</div>
		<script>
			const vm = new Vue({
				el: '#root',
				data: function() {
					return {
						name: '读书点点',
						attribute: 'normal',
						classArr: ["atguigu1", "atguigu2", "atguigu3"],
						classObj: {
							atguigu1: false,
							atguigu2: false
						},
						styleObj: {
							fontSize: '30px',
							color: 'red',
							backgroundColor: 'orange'
						}
					}
				},
				methods: {
					changeMood() {
						let arr = ["normal", "sad", "happy"];
						let index = Math.floor(Math.random() * 3)
						this.attribute = arr[index];
					}
				}
			});
		</script>
	</body>
</html>